<style scoped>

    .file-item:hover {
        background: rgba(51, 125, 255, 0.06);
    }

    .file-item:hover .del-btn {
        visibility: visible;
    }

    .del-btn {
        visibility: hidden;
        border: 1px dashed #ddd;
        width: 16px;
        height: 16px;
        line-height: 12px;
        text-align: center;
        position: relative;
        top: 6px;
        right: 10px;
        margin-left: 10px;
    }

    .read-card {
        position: relative;
        width: 140px;
        height: 66px;
        margin-right: 20px;
        background: #F4F5F7;
        padding-left: 15px;
        border-radius: 4px;
    }

    .read-card.active {
        background: #EDF4FD;
    }

    .read-card-status {
        position: absolute;
        top: 8px;
        right: 6px;
    }

    .read-card.active .read-card-status {
        color: #598FD1;
    }

    .border {
        border: 1px solid #eee;
        border-radius: 8px;
        padding-left: 20px;
        position: relative;
    }

    .replyCard {
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }
</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div>
                <div @click="$router.back()" class="back-btn">
                    <Icon type="ios-arrow-back"/>
                </div>
                <a @click="$router.back()">{{from === 'task' ? '任务管理': type}}</a> / 查看
            </div>
        </div>
        <div class="page-content flex-column" style="height: calc(100% - 50px);">

            <div class="content-block bg-white p-20 m-b-15">


                <div class="top-title-text black blod">基础信息</div>
                <div class="p-20">

                    <div class="flex h30 m-b-20">

                        <div class="flex w30p">
                            <div class="gray w80">门禁名称：</div>
                            <div class="flex-1">{{detail.mj_mc}}</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">门禁编号：</div>
                            <div class="flex-1">{{detail.mj_bh}}</div>
                        </div>
                    </div>

                    <div class="flex h30 m-b-20">

                        <div class="flex w30p">
                            <div class="gray w80">所在位置：</div>
                            <div class="flex-1">{{detail.sz_wz}}</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">门号：</div>
                            <div class="flex-1">{{detail.mh}}</div>
                        </div>
                    </div>

                    <div class="flex h30 m-b-20">

                        <div class="flex w30p">
                            <div class="gray w80">管理员：</div>
                            <div class="flex-1">{{detail.gly}}</div>
                        </div>
                        <div class="flex w30p">
                            <div class="gray w80">联系方式：</div>
                            <div class="flex-1">{{detail.lxfs}}</div>
                        </div>
                    </div>

                    <div class="flex h30 m-b-20">

                        <div class="flex">
                            <div class="gray w80">描述：</div>
                            <div class="flex-1">{{detail.ms}}</div>
                        </div>
                    </div>

                </div>

                <div class="top-title-text black blod">开门记录</div>

                <div class="search-block bg-white p-20">
                    <Form inline :label-width="90">
                        <FormItem label="时间范围">
                            <DatePicker v-model="search.timeArr" class="w220" type="daterange" split-panels
                                        placeholder="请选择" clearable></DatePicker>
                        </FormItem>
                        <FormItem :label-width="0">
                            <Button @click="goSearch" class="m-r-10" type="primary">搜索</Button>
                        </FormItem>
                        <FormItem class="f-r" :label-width="0">
                            <Button class="m-r-10" type="primary"><img src="assets/image/add.png">导出EXCEL</Button>
                        </FormItem>
                    </Form>
                </div>

                <div class="content-block bg-white p-0-20 flex-1 flex-column">

                    <Table :height="350"
                           :columns="columns"
                           :data="list"
                    >
                    </Table>
                    <div class="page-box">
                        <Page :total="total"
                              :current="page"
                              show-sizer show-elevator show-total
                              @on-change="onPageChange"
                              @on-page-size-change="changePageSize"
                              :page-size="pageSize"
                        />
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                type: '',
                tempList: [],

                detail: {
                    // opinionReplyInf: [
                    //     {
                    //         user_name: '用户1',
                    //         re_content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacusLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus'
                    //     },
                    //     {
                    //         user_name: '用户1',
                    //         re_content: '批示内容'
                    //     }
                    // ],
                },

                search: {
                    str: '',
                    timeArr: [],
                },
                total: 0,
                page: 1,
                pageSize: 10,

                columns: [
                    {
                        title: '操作人',
                        key: 'czr_mc',
                    },
                    {
                        title: '开启时间',
                        key: 'kq_sj'
                    },
                    {
                        title: '关闭时间',
                        key: 'gb_sj'
                    },
                ],
                list: [],
                from: '',
            }
        },
        created() {
            this.type = this.$route.query.type;
            this.from = this.$route.query.from || ''
            this.getDetail();
            this.getList();
        },
        methods: {
            getDetail() {

                let url = '/hand/mjInf'

                let postData = {
                    mj_id: this.$route.query.id
                };

                this.util.get(url, postData).then(res => {
                    console.log('详情', JSON.parse(JSON.stringify(res)))
                    let detail = res.data || [];

                    this.detail = detail;
                })
            },

            onPageChange(page) {
                this.page = page;
                this.getList();
            },
            //改变每页条数
            changePageSize(size) {
                this.pageSize = size;
                this.onPageChange(1)
            },
            goSearch() {
                this.onPageChange(1)
            },
            reset() {
                this.search = {
                    str: '',
                    timeArr: [],
                };
                this.goSearch();
            },
            getList() {
                let postData = {
                    pageSize: this.pageSize,
                    pageNum: this.page,
                    mj_id: this.$route.query.id,
                };

                if(this.search.timeArr.length) {
                    if(this.search.timeArr[0]) {
                        postData.start_date = moment(this.search.timeArr[0]).format('YYYY-MM-DD 00:00:00')
                    }
                    if(this.search.timeArr[1]) {
                        postData.end_date = moment(this.search.timeArr[1]).format('YYYY-MM-DD 23:59:59')
                    }
                }

                this.util.get('/hand/mjkmjlLists', postData).then(res => {
                    console.log('获取列表', JSON.parse(JSON.stringify(res)))
                    this.list = res.data || [];
                    this.total = res.total || 0;

                })
            },
        },
    }
</script>

